createContext

🧑🏻‍💻 createContext

---

createContext를 사용하면 컴포넌트가 제공하거나 읽을 수 있는 컨텍스트를 만들 수 있다.

✅ createContext 문법

const SomeContext = createContext(defaultValue)

• 컴포넌트 외부에서 createContext를 호출하여 컨텍스트를 생성해야 한다.
• defaultValue는 컨텍스트를 읽는 컴포넌트 상위 트리에 일치하는 컨텍스트 provider가 없을 때 사용되는 초기 값이다. 의미 있는 기본값이 없다면 null을 지정하는 것이 좋다.
• createContext 는 컨텍스트 객체를 반환한다.

🧑🏻‍💻 알고 가기

---

✅ 동작 원리

import { createContext } from 'react';

const ThemeContext = createContext('light');
const AuthContext = createContext(null);

• 하나 이상의 컨텍스트를 생성하려면 컴포넌트 외부에서 createContext를 호출해야 한다.
• createContext는 컨텍스트 객체를 반환한다. 컴포넌트는 컨텍스트를 useContext()에 전달하여 컨텍스트를 읽을 수 있다.

🧑🏻‍💻 활용 및 생각할 거리

---

✅ 서로 다른 파일에서 동일한 컨텍스트를 사용하려면?

• 다른 파일에서 선언된 컴포넌트는 import 구문을 사용하여 이 컨텍스트를 읽거나 제공할 수 있다.

  // Contexts.js
  import { createContext } from 'react';
  
  export const ThemeContext = createContext('light');
  export const AuthContext = createContext(null);

  // App.js
  import { ThemeContext, AuthContext } from './Contexts.js';
  
  function App() {
    // ...
    return (
      <ThemeContext.Provider value={theme}>
        <AuthContext.Provider value={currentUser}>
          <Page />
        </AuthContext.Provider>
      </ThemeContext.Provider>
    );
  }

✅ 컨텍스트 객체

• 컨텍스트 객체 자체는 어떠한 정보도 보유하지 않는다.
• 대신 다른 컴포넌트가 읽거나 제공할 수 있는 컨텍스트를 나타낸다.

  function App() {
    const [theme, setTheme] = useState('light');
    // ...
    return (
      <ThemeContext.Provider value={theme}>
        <Page />
      </ThemeContext.Provider>
    );
  }
  • SomeContext.Provider 로 상위 컴포넌트에서 호출해 컨텍스트 값을 지정할 수 있다.
  • value 는 해당 provider 내에서 이 컨텍스트를 읽는 모든 컴포넌트에 전달하려는 값이다. 컨텍스트 값은 모든 타입이 될 수 있다.